<template>
    <div class="homePage">
        <el-row>
            <template v-for="(item, index) in echartList" :key="item">
                <el-col :span="6" :xs="24" :sm="12" :md="8" :lg="6" :xl="4"
                    style="padding: 0 10px;box-sizing: border-box;">
                    <div class="grid-content bg-purple c3 fs14">
                        <div style="height: 40px; line-height: 40px;padding-left: 20px;">
                            {{ item.device_id }}
                        </div>
                        <div :id="item.device_id" style="width: 100%;min-height: 300px;" class="flex-center-center">

                        </div>
                        <div class="text-align-center fs12 c6" style="height: 40px; line-height: 40px;">
                            更新时间 : 2022年6月5日 13 : 29 : 12
                        </div>
                    </div>
                </el-col>
            </template>
        </el-row>
    </div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance, onBeforeMount } from "vue";
import { getDeviceBatchAll } from "@/api";
import { useStore } from "vuex";
const { proxy } = getCurrentInstance();

// 初始化store
const store = useStore();
const echartList = ref([])

onBeforeMount(() => {
    // getDevice();
    console.log('store', store.state)
})
// 获取所有数据最新设备
const getDevice = async () => {
    echartList.value = await getDeviceBatchAll();
    return echartList;
}

onMounted(() => {
    getDevice().then((res) => {
        // echartList.value.forEach((item)=> {
        for (let i = 0; i < res.value.length; i++) {
            let chartDom = document.getElementById(res.value[i].device_id);
            let myChart = proxy.$echarts.init(chartDom);
            let ro = new ResizeObserver((entries) => {
                myChart.resize();
            });
            ro.observe(chartDom);
            var option;

            const gaugeData = [
                {
                    value: res.value[i].temperature,
                    name: '温度(℃)',
                    title: {
                        fontSize: 13,
                        offsetCenter: ['-30%', '78%']
                    },
                    detail: {
                        width: 36,
                        height: 12,
                        offsetCenter: ['-30%', '100%']
                    }
                },
                {
                    value: res.value[i].humidity,
                    name: '湿度(%)',
                    title: {
                        fontSize: 13,
                        offsetCenter: ['30%', '78%']
                    },
                    detail: {
                        width: 36,
                        height: 12,
                        offsetCenter: ['30%', '100%']
                    }
                },
            ];
            option = {
                series: [
                    {
                        type: 'gauge',
                        anchor: {
                            show: true,
                            showAbove: true,
                            size: 18,
                            itemStyle: {
                                color: '#FAC858'
                            }
                        },
                        pointer: {
                            icon: 'path://M2.9,0.7L2.9,0.7c1.4,0,2.6,1.2,2.6,2.6v115c0,1.4-1.2,2.6-2.6,2.6l0,0c-1.4,0-2.6-1.2-2.6-2.6V3.3C0.3,1.9,1.4,0.7,2.9,0.7z',
                            width: 8,
                            length: '80%',
                            offsetCenter: [0, '8%']
                        },
                        progress: {
                            show: true,
                            overlap: true,
                            roundCap: true
                        },
                        axisLine: {
                            roundCap: true
                        },
                        data: gaugeData,
                        title: {
                            fontSize: 14
                        },
                        detail: {
                            width: 40,
                            height: 14,
                            fontSize: 14,
                            color: '#fff',
                            backgroundColor: 'inherit',
                            borderRadius: 3,
                            formatter: '{value}'
                        }
                    }
                ]
            };
            // (function (i) {
                setInterval(function () {
                    gaugeData[0].value = res.value[i].temperature;
                    gaugeData[1].value = res.value[i].humidity;
                    myChart.setOption({
                        series: [
                            {
                                data: gaugeData
                            }
                        ]
                    });
                }, 100);
            // })(i)


            option && myChart.setOption(option);
        }
    });




})


</script>

<style lang="scss" scoped>
.homePage {
    padding: 14px 10px 0;
    box-sizing: border-box;

    .bg-purple {
        background: #d3dce6;
        border: 1px solid #ccc;
    }

    .grid-content {
        margin-bottom: 20px;
    }

}
</style>

